<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="auto"
      :rules="rules"
    >
      <el-form-item label="部门" prop="deptId" >
        <el-cascader
          style="width:240px;"
          v-model="queryParams.deptId"
          :options="deptList"
          :props="{ expandTrigger: 'hover',value: 'id' }"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="年份" prop="year">
        <el-date-picker
          value-format="yyyy"
          v-model="queryParams.year"
          type="year"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div style="font-size: 14px; color: #666; padding-left: 8px">单位：时</div>
    <el-table
      v-loading="loading"
      :data="tableData"
      height="300px"
      border
      style="margin-bottom: 16px"
    >
      <el-table-column
        prop="columnTitleName"
        label="工时类别"
        width="150px;"
      ></el-table-column>
      <el-table-column prop="january" label="一月"></el-table-column>
      <el-table-column prop="february" label="二月"></el-table-column>
      <el-table-column prop="march" label="三月"></el-table-column>
      <el-table-column prop="april" label="四月"></el-table-column>
      <el-table-column prop="may" label="五月"></el-table-column>
      <el-table-column prop="june" label="六月"></el-table-column>
      <el-table-column prop="july" label="七月"></el-table-column>
      <el-table-column prop="august" label="八月"></el-table-column>
      <el-table-column prop="september" label="九月"></el-table-column>
      <el-table-column prop="october" label="十月"></el-table-column>
      <el-table-column prop="november" label="十一月"></el-table-column>
      <el-table-column prop="december" label="十二月"></el-table-column>
      <el-table-column prop="total" label="合计"></el-table-column>
    </el-table>
    <div
      id="myEchart"
      style="width: 100%; height: 400px; margin-bottom: 16px"
    ></div>
  </div>
</template>

<script>
import { getWorkHourStatistics, getDeptTreeByFid } from "@/api/mes/report/lineCapacity.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      deptList: [],
      dataList: [],
      // 遮罩层
      loading: false,
      queryParams: {
        year: null, // ,
        deptId: null,
      },
      tableData: [],
      year: null,
      option: {
        title: {
          text: "工时",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: [],
        },
        yAxis: {
          type: "value",
          minInterval: 1,
        },
        series: [
          {
            name: "",
            type: "line",
            data: [],
          },
        ],
      },
      myChart: null,
      rules: {
        year: [{ required: true, message: "年份必填!", trigger: "change" }],
        deptId: [{ required: true, message: "部门必填!", trigger: "change" }],
      },
    };
  },
  created(){
    this.getDeptTreeByFid()
  },
  mounted() {
    this.init();
  },
  methods: {
    handleChange() {

    },
    init() {
      let fullYear = new Date().getFullYear();
      fullYear = fullYear.toString();
      this.queryParams.year = fullYear;
      var chartDom = document.getElementById("myEchart");
      this.myChart = echarts.init(chartDom);
    },
    getDeptTreeByFid() {
      const param = {
        fid: 319328
      }
      getDeptTreeByFid(param).then(res => {
        console.log(res.data)
        this.deptList = res.data
      })
    },
    /** 查询生产报工记录列表 */
    getList() {
      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.dataList = [];
          this.tableData = [];
          const param = {
            deptId: this.queryParams.deptId[this.queryParams.deptId.length-1],
            year: this.queryParams.year,
          };
          getWorkHourStatistics(param)
            .then((res) => {
              this.tableData = res.data || [];
              this.loading = false;
              let legend = [];
              let series = [];
              legend = this.tableData.map((item) => {
                return item.columnTitleName;
              });
              series = this.tableData.map((item) => {
                let obj = {
                  name: item.columnTitleName,
                  type: "line",
                  data: [
                    item.january,
                    item.february,
                    item.march,
                    item.april,
                    item.may,
                    item.june,
                    item.july,
                    item.august,
                    item.september,
                    item.october,
                    item.november,
                    item.december,
                    item.total,
                  ],
                };
                return obj;
              });
              this.option.legend.data = legend;
              this.option.series = series;
              this.myChart.setOption(this.option);
            })
            .catch((err) => {
              this.tableData = [];
              this.loading = false;
            });
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
  },
};
</script>
